<!-- 电磁环境视角组件 -->
<template>
  <div class="electromagnetic-view">
    <div class="em-environment">
      <!-- 3D时频图 -->
      <div class="webgl-container">
        <div class="chart-header">
          <h4>三维时频分析</h4>
          <el-button-group size="small">
            <el-button @click="resetTimeFreqView">重置视角</el-button>
            <el-button @click="toggleTimeFreqMode">切换模式</el-button>
          </el-button-group>
        </div>
        <div class="time-freq-3d" id="timeFreq3D">
          <div class="webgl-placeholder">
            <div class="webgl-info">
              <h5>三维时频图</h5>
              <p>WebGL 渲染引擎</p>
              <div class="webgl-controls">
                <div class="control-group">
                  <span class="control-label">视角模式:</span>
                  <el-radio-group :model-value="viewMode" @update:model-value="viewMode = $event" size="small">
                    <el-radio-button label="perspective">透视</el-radio-button>
                    <el-radio-button label="orthographic">正交</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="control-group">
                  <span class="control-label">时间窗口:</span>
                  <el-slider 
                    :model-value="timeWindow" 
                    @update:model-value="timeWindow = $event"
                    :min="1" 
                    :max="60" 
                    :step="1"
                    show-input
                    :show-input-controls="false"
                    class="time-window-slider"
                  />
                  <span class="unit">秒</span>
                </div>
                <div class="control-group">
                  <span class="control-label">频率范围:</span>
                  <el-slider 
                    :model-value="frequencyRange" 
                    @update:model-value="frequencyRange = $event"
                    range
                    :min="1" 
                    :max="18" 
                    :step="0.1"
                    show-input
                    class="freq-range-slider"
                  />
                  <span class="unit">GHz</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 关系图谱 -->
      <div class="chart-container">
        <div class="chart-header">
          <h4>电磁关系图谱</h4>
          <el-button-group size="small">
            <el-button @click="resetRelationView">重置</el-button>
            <el-button @click="exportRelation">导出</el-button>
          </el-button-group>
        </div>
        <div class="relation-chart" id="relationChart">
          <div class="chart-placeholder">
            <div class="chart-info">
              <h5>关系图谱</h5>
              <p>D3.js 力导向图</p>
              <div class="relation-stats">
                <div class="stat-grid">
                  <div class="stat-card">
                    <div class="stat-value">{{ nodeCount }}</div>
                    <div class="stat-label">节点数</div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-value">{{ edgeCount }}</div>
                    <div class="stat-label">连接数</div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-value">{{ clusterCount }}</div>
                    <div class="stat-label">簇数</div>
                  </div>
                </div>
                <div class="relation-legend">
                  <div class="legend-item">
                    <div class="legend-color threat"></div>
                    <span>威胁信号</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-color friendly"></div>  
                    <span>友方信号</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-color unknown"></div>
                    <span>未知信号</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// Props
defineProps({
  electromagneticData: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits([
  'timeFreqReset',
  'timeFreqModeToggle',
  'relationReset', 
  'relationExport'
])

// 3D时频图控制参数
const viewMode = ref('perspective')
const timeWindow = ref(10)
const frequencyRange = ref([2, 12])

// 关系图谱统计数据
const nodeCount = ref(24)
const edgeCount = ref(38)
const clusterCount = ref(5)

// 方法定义
const resetTimeFreqView = () => {
  viewMode.value = 'perspective'
  timeWindow.value = 10
  frequencyRange.value = [2, 12]
  emit('timeFreqReset')
  ElMessage.info('时频视图已重置')
}

const toggleTimeFreqMode = () => {
  viewMode.value = viewMode.value === 'perspective' ? 'orthographic' : 'perspective'
  emit('timeFreqModeToggle', viewMode.value)
  ElMessage.info('时频显示模式已切换')
}

const resetRelationView = () => {
  emit('relationReset')
  ElMessage.info('关系图谱已重置')
}

const exportRelation = () => {
  emit('relationExport')
  ElMessage.success('关系图谱已导出')
}

// 初始化WebGL和D3
const initializeVisualization = () => {
  // 这里将初始化 WebGL 和 D3.js
  console.log('初始化电磁环境可视化...')
  
  // 模拟数据更新
  setInterval(() => {
    // 模拟节点数变化
    nodeCount.value = 20 + Math.floor(Math.random() * 10)
    edgeCount.value = 30 + Math.floor(Math.random() * 20)
    clusterCount.value = 3 + Math.floor(Math.random() * 5)
  }, 5000)
}

// 组件挂载时初始化
onMounted(() => {
  initializeVisualization()
})
</script>

<style scoped>
.electromagnetic-view {
  height: 100%;
  padding: 1vh;
}

.em-environment {
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1vh;
}

.webgl-container,
.chart-container {
  background: #263445;
  border-radius: 0.8vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chart-header {
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5vw;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
  flex-shrink: 0;
}

.chart-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #bfcbd9;
}

.chart-header .el-button {
  background: #263445;
  border-color: #2d3a4b;
  color: #bfcbd9;
  font-size: 0.8rem;
}

.chart-header .el-button:hover {
  background: #2d3a4b;
  border-color: #409EFF;
  color: #409EFF;
}

.time-freq-3d,
.relation-chart {
  flex: 1;
  background: #0a0f1b;
  position: relative;
}

.webgl-placeholder,
.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0f1b 0%, #1a2332 100%);
}

.webgl-info,
.chart-info {
  text-align: center;
  color: #bfcbd9;
  width: 100%;
  max-width: 90%;
}

.webgl-info h5,
.chart-info h5 {
  margin: 0 0 0.5vh 0;
  font-size: 1.2rem;
  color: #409EFF;
}

.webgl-info p,
.chart-info p {
  margin: 0 0 2vh 0;
  color: #8591a3;
  font-size: 0.85rem;
}

.webgl-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  margin-top: 2vh;
  padding: 1.5vh;
  background: rgba(38, 52, 69, 0.6);
  border-radius: 0.6vh;
  backdrop-filter: blur(4px);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 1vw;
  font-size: 0.85rem;
}

.control-label {
  color: #8591a3;
  min-width: 6vw;
}

.time-window-slider,
.freq-range-slider {
  flex: 1;
  margin: 0 1vw;
}

.unit {
  color: #8591a3;
  font-size: 0.8rem;
  min-width: 2vw;
}

.relation-stats {
  margin-top: 2vh;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
  margin-bottom: 2vh;
}

.stat-card {
  background: rgba(38, 52, 69, 0.6);
  border-radius: 0.6vh;
  padding: 1vh;
  text-align: center;
  backdrop-filter: blur(4px);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 0.5vh;
}

.stat-label {
  font-size: 0.8rem;
  color: #8591a3;
}

.relation-legend {
  display: flex;
  justify-content: space-around;
  padding: 1vh;
  background: rgba(38, 52, 69, 0.4);
  border-radius: 0.6vh;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.threat {
  background: #F56C6C;
}

.legend-color.friendly {
  background: #67C23A;
}

.legend-color.unknown {
  background: #E6A23C;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-radio-button__inner) {
  background: #263445;
  border-color: #2d3a4b;
  color: #bfcbd9;
}

:deep(.el-radio-button__inner:hover) {
  background: #2d3a4b;
  border-color: #409EFF;
  color: #409EFF;
}

:deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: #409EFF;
  border-color: #409EFF;
  color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .em-environment {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
  }
  
  .webgl-controls {
    gap: 1vh;
    padding: 1vh;
  }
  
  .control-group {
    font-size: 0.8rem;
  }
  
  .control-label {
    min-width: 8vw;
  }
}

@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 0.5vh;
  }
  
  .relation-legend {
    flex-direction: column;
    gap: 0.5vh;
  }
  
  .webgl-info h5,
  .chart-info h5 {
    font-size: 1rem;
  }
}
</style>